<#include "/admin/utils/ui.ftl"/>
<@layout>
<section class="content-header">
    <h1><#if view??>修改栏目<#elseif parent??>添加子栏目<#else>添加栏目</#if></h1>
    <ol class="breadcrumb">
        <li><a href="${base}/admin">首页</a></li>
        <li><a href="${base}/admin/channel/list">栏目管理</a></li>
        <li class="active">
        	<#if view??>修改栏目<#elseif parent??>添加子栏目<#else>添加栏目</#if>
        </li>
    </ol>
</section>
<section class="content container-fluid">
    <div class="row">
        <div class="col-md-12">
            <form id="qForm" class="form-horizontal form-label-left" method="post" action="update">
                <#if view??>
                    <input type="hidden" name="id" value="${view.id}" />
                </#if>
                <input type="hidden" name="weight" value="${view.weight!0}">
                <input type="hidden" id="thumbnail" name="thumbnail" value="${view.thumbnail}">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title"><#if view??>修改栏目<#elseif parent??>添加子栏目<#else>添加栏目</#if></h3>
                    </div>
                    <div class="box-body">
                    	<#if parent??>
	                    	<div class="form-group">
	                            <label class="col-lg-2 control-label">父栏目</label>
	                            <div class="col-lg-3">
	                                <input type="hidden" name="parentId" class="form-control" value="${parent.id}" required>
	                                <input disabled="disabled" type="text" class="form-control" value="${parent.name}" required>
	                            </div>
	                        </div>
						</#if>	                        
                        <div class="form-group">
                            <label class="col-lg-2 control-label">名称</label>
                            <div class="col-lg-3">
                                <input type="text" name="name" class="form-control" value="${view.name}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">唯一标识</label>
                            <div class="col-lg-3">
                                <input type="text" name="key" class="form-control" value="${view.key}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">外链</label>
                            <div class="col-lg-3">
                                <input type="text" name="blank" class="form-control" value="${view.blank}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">target</label>
                            <div class="col-lg-3">
                                <input type="text" name="target" class="form-control" value="${view.target}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">导航栏状态</label>
                            <div class="col-lg-3">
                                <select name="status" class="form-control" data-select="${view.status}">
                                    <option value="0">显示</option>
                                    <option value="1">隐藏</option>
                                </select>
                            </div>
                        </div>
                        <#assign logo = view.logo/>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">LOGO</label>
                            <div class="col-lg-3 input-group" style="padding-left: 15px;">
                                <input name="logo" data-placement="bottomRight" autocomplete="off" class="form-control icp icp-auto" value="${view.logo?replace(' fa-fw','')?replace(' fa-spin','')}" type="text"/>
                            	<span class="input-group-addon" style="border: hidden;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">动态LOGO</label>
                            <div class="col-lg-3">
                                <input id="status" type="checkbox" <#if view.logo?contains('fa-spin')>checked</#if>>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">缩略图</label>
                            <div class="col-lg-3">
                                <div class="thumbnail-box">
                                    <div class="convent_choice" id="thumbnail_image" <#if view.thumbnail?? && view.thumbnail?length gt 0> style="background: url(${base + view.thumbnail}) no-repeat scroll top;" </#if>>
                                        <div class="upload-btn">
                                            <label>
                                                <span>点击选择一张图片</span>
                                                <input id="upload_btn" type="file" name="file" accept="image/*" title="点击添加图片">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script type="text/javascript">
var J = jQuery;

$(function() {
	$('.icp-auto').iconpicker({
		fullClassFormatter: function(val){
            return val + ' fa-fw';
        }
	});
	
	$('.iconpicker-item').click(function(){
		$('[id="status"]').bootstrapSwitch('state', false)
		//if($('[id="status"]').bootstrapSwitch('state')) {
		//	$('.input-group-addon i').addClass('fa-spin');
		//	$('[name="logo"]').val($('[name="logo"]').val()+" fa-spin");		 
		//}
	});
	
	<#if view.logo?contains('fa-spin')>
		$('.input-group-addon i').addClass('fa-spin');
		$('[name="logo"]').val($('[name="logo"]').val()+" fa-spin");
	</#if>
	
	$('[id="status"]').bootstrapSwitch({
       onColor:"success",
       offColor:"info",
       size:"normal",
       onSwitchChange:function(event,state){
			if(state==true){
				$('.input-group-addon i').addClass('fa-spin');
				$('[name="logo"]').val($('[name="logo"]').val()+" fa-spin");
			}else{
				$('.input-group-addon i').removeClass('fa-spin');
				$('[name="logo"]').val($('[name="logo"]').val().replace(" fa-spin",""));
			}
		}
    });
    
    $('#upload_btn').change(function(){
        $(this).upload('${base}/post/upload?crop=thumbnail_channel_size', function(data){
            if (data.status == 200) {
                var path = data.path;
                $("#thumbnail_image").css("background", "url(" + path + ") no-repeat scroll center 0 rgba(0, 0, 0, 0)");
                $("#thumbnail").val(path);
            }
        });
    });
})
</script>
</@layout>